<template>
  <div>
    <div class="upt" :style="style">
      <i class="el-icon-info" />
        {{tipText}}：<span class="upt-time">{{ this.time }}</span>
        <a @click="handleClickUpdate" class="upd-bt" :style="btStyle">{{btText}}</a>
    </div>
  </div>

</template>

<script>
  import {hexToRGB} from '@/utils/cssUtil'

  export default{
    name:'LastUpdate',
    props:{
      time:{
        type: String,
        default: ''
      },
      onClickUpdate:{
        type: Function,
        default: function(){}
      },
      tipText:{
        type: String,
        default: '上次更新时间'
      },
      btText:{
        type: String,
        default: '立即更新'
      }
    },
    data(){
      return {

      }
    },
    computed:{
      style(){
        return {
          'color': hexToRGB(this.$store.state.settings.theme, 100),
          'background-color': hexToRGB(this.$store.state.settings.theme, 15)
        }
      },
      btStyle(){
        return {
          'background-color': this.$store.state.settings.theme
        }
      }
    },
    methods:{
      handleClickUpdate(){
        if(this.onClickUpdate && this.onClickUpdate instanceof Function){
          this.onClickUpdate();
        }
      }
    }
  }
</script>

<style scoped>
  .upt{
    margin-bottom: 8px;
    width: 100%;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    opacity: 1;
    display: flex;
    align-items: center;
    transition: opacity .2s;
    background-color: #f0f9eb;
    color: #67c23a;
  }
  .upt-time{
    color: red;
  }
  .upd-bt{
    margin-left: 10px;
    font-weight: bold;
    background-color: #1890ff;
    padding: 3px;
    font-size: 12px;
    border-radius: 5px;
    color: white;
  }
</style>
